/* eslint-disable vue/require-prop-types */
<template>
  <div>
    <p v-for="(item, index) in opteionsitems" :key="item.codcode" :class="item.codcode === isactive || index === currentValue ? 'isActive' : null" class="item" @click="changeAction(item.codcode)">
      {{ item.codname }}
      <span v-if="tabAwaitCountAction(item)" class="tabAwaitCount">!</span>
    </p>
  </div>
</template>

<script>
import page from '@/mixins/page'
export default {
  mixins: [page],
  // eslint-disable-next-line vue/require-prop-types
  props: ['options', 'name', 'label', 'value', 'disabled', 'optionsurl', 'date'],
  data() {
    return {
      currentValue: 0,
      opteionsitems: [],
      isactive: null
    }
  },
  watch: {
    value() {
      this.isactive = this.value
    }
  },
  created() {
    // this.isactive = this.value
    if (this.optionsurl) {
      this.queryAction()
    } else {
      this.opteionsitems = this.options
    }
  },
  methods: {
    // 惊叹号标记
    tabAwaitCountAction(item) {
      if (this.date && this.date.tabAwaitCount) {
        const AwaitCount = this.$store.getters.getTabAwaitCount
        if (AwaitCount[Number(item.codcode) - 1] > 0) {
          return true
        }
      }
    },
    changeAction(value) {
      this.currentValue = null
      this.isactive = value
      this.$emit('change', this.name, value)
    },
    queryAction() {
      this.api[this.optionsurl](this.options).then(res => {
        //判断 是否需要 [全部] 的选项
        if (this.date && this.date.noShowAll) {
          this.opteionsitems = [...res]
        } else {
          const arrobj = {}
          arrobj.id = null
          arrobj.codcode = null
          arrobj.codname = '全部'
          const arr = [{ ...arrobj }]
          this.opteionsitems = [...arr, ...res]
        }
        //判断是否需要 自动调用列表页面的接口
        if (this.date && this.date.isCreatedHttp) {
          this.$emit('change', this.name, this.opteionsitems.length > 0 ? this.opteionsitems[0].codcode : '')
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>
.item {
  position: relative;
  display: inline-block;
  padding: 0 0.2rem;
  margin: 0.05rem;
  height: 32px;
  line-height: 32px;
  cursor: pointer;
  box-sizing: border-box;
  color: #6b6b6b;
  border: 1px solid #dadada;
  border-radius: 4px;
}
.isActive {
  background: #000965;
  border-radius: 4px;
  color: #fff;
  border: 1px solid #000965;
}
.tabAwaitCount {
  display: block;
  position: absolute;
  color: #fff;
  width: 15px;
  height: 15px;
  background: red;
  border-radius: 50%;
  text-align: center;
  right: -3px;
  line-height: 15px;
  top: -3px;
}
</style>
